<template>
    <div>
        <a-form @keypress.enter="handleSearch">
            <flexbox align="flex-start">
                <flexbox class="cell-item" v-for="item of fieldList.slice(0, showFieldMaxNum - 1)" :key="item.field">
                    <a-select allowClear :placeholder="item.placeholder" v-model:value="form[item.field]" v-if="item.formType === 'select'">
                        <a-select-option :key="item.code" v-for="item of item.setting">
                            {{ item.dimensionName }}
                        </a-select-option>
                    </a-select>
                    <h-dic-select
                        :type="item.type || item.field"
                        :title="item.title"
                        v-model:value="form[item.field]"
                        v-if="item.formType === 'dicSelect'"
                    />
                    <a-input allowClear :placeholder="item.placeholder" v-model:value="form[item.field]" v-if="item.formType === 'input'" />
                </flexbox>
                <HSuggestInput
                    class="cell-item"
                    allowClear
                    placeholder="请输入需求名称"
                    v-model:value="searchKeyword"
                    style="max-width: 300px"
                    @change="handleSearch"
                />
                <flexbox class="cell-item margin-r-16" style="min-width: 50px" v-if="fieldList.length + 1 > showFieldMaxNum">
                    <h-show-more-select
                        :options="fieldList.slice(showFieldMaxNum - 1)"
                        v-model:value="extendedSearchArr"
                        @change="handleExtendedSearchArrChange"
                    />
                </flexbox>
                <a-button type="primary" @click="handleSearch">搜索</a-button>
                <a-button class="margin-l-8" @click="handleReset">重置</a-button>
            </flexbox>
        </a-form>
        <flexbox class="margin-t-8" v-if="extendedSearchArr.length">
            <flexbox class="cell-item" v-for="item of extendedSearchArr" :key="item.field">
                <a-select :placeholder="item.placeholder" v-model:value="form[item.field]" v-if="item.formType === 'select'">
                    <a-select-option :key="item.code" v-for="item of item.setting">
                        {{ item.dimensionName }}
                    </a-select-option>
                </a-select>
                <h-dic-select
                    :type="item.type || item.field"
                    :title="item.title"
                    v-model:value="form[item.field]"
                    v-if="item.formType === 'dicSelect'"
                />
                <a-input
                    class="cell-item"
                    allowClear
                    :placeholder="item.placeholder"
                    v-model:value="form[item.field]"
                    v-if="item.formType === 'input'"
                />
                <h-custom-select
                    :searchQuery="{ systemId: system, type: 3 }"
                    v-model:value="form.pmpLabels"
                    v-if="item.formType === 'customSelect'"
                />
                <flexbox style="padding-left: 8px" v-if="item.formType === 'createDate'">
                    <div style="width: 70px; font-size: 13px; margin-right: 8px">{{ item.title }}：</div>
                    <h-range-picker-cell
                        :value="[
                            form.createTime ? $moment(form.createTime, 'YYYY-MM-DD') : null,
                            form.createTimeEnd ? $moment(form.createTimeEnd, 'YYYY-MM-DD') : null
                        ]"
                        @change="rangeDateChange($event, item.field)"
                    />
                </flexbox>

                <flexbox style="padding-left: 8px" v-if="item.formType === 'onlineDate'">
                    <div style="width: 70px; font-size: 13px; margin-right: 8px">{{ item.title }}：</div>
                    <h-range-picker-cell
                        :value="[
                            form.onlineRealTimeStart ? $moment(form.onlineRealTimeStart, 'YYYY-MM-DD') : null,
                            form.onlineRealTimeEnd ? $moment(form.onlineRealTimeEnd, 'YYYY-MM-DD') : null
                        ]"
                        @change="rangeDateChange($event, item.field)"
                    />
                </flexbox>

                <close-circle-filled class="margin-l-8" style="font-size: 12px; color: rgba(0, 0, 0, 0.25)" @click="handleDeleteSearchItem(item)" />
            </flexbox>
        </flexbox>
    </div>
</template>

<script lang="ts">
import { useSearchHistory } from '@/hooks/common/useSearchHistory';
import { CloseCircleFilled } from '@ant-design/icons-vue';
import { HCustomSelect, HDicSelect, HShowMoreSelect, HRangePickerCell, HSuggestInput } from '@/components';
import { defineComponent, ref, unref, watch } from 'vue';
export default defineComponent({
    components: {
        CloseCircleFilled,
        HDicSelect,
        HShowMoreSelect,
        HCustomSelect,
        HRangePickerCell,
        HSuggestInput
    },
    props: {
        system: Number
    },
    emits: ['search'],
    setup(props, { emit }) {
        const { saveHistory } = useSearchHistory();
        const form: any = ref({
            requireType: null,
            relateVersionNumber: null,
            level: null,
            status: null,
            stage: null,
            createTime: null,
            createTimeEnd: null,
            onlineRealTimeStart: null,
            onlineRealTimeEnd: null
        });
        const fieldList = ref<any>([
            { field: 'requireType', title: '需求类型', placeholder: '需求类型', formType: 'dicSelect' },
            { field: 'level', title: '优先级', placeholder: '优先级', formType: 'dicSelect' },
            { field: 'status', type: 'productRequireStatus', title: '状态', placeholder: '状态', formType: 'dicSelect' },
            { field: 'relateVersionNumber', title: '预发布版本号', placeholder: '请输入预发布版本号', formType: 'input' },
            { field: 'stage', type: 'productStage', title: '需求阶段', placeholder: '需求阶段', formType: 'dicSelect' },
            { field: 'pmpLabels', title: '标签', placeholder: '标签', formType: 'customSelect' },
            { field: 'createTime', title: '创建时间', formType: 'createDate' },
            { field: 'realTime', title: '上线时间', formType: 'onlineDate' }
        ]);
        const showFieldMaxNum = ref<number>(5);
        const searchKeyword = ref<string>('');
        const extendedSearchArr = ref<Recordable[]>([]);
        // 通用选择回调
        const handleSelectChange = (val) => {
            form.value.version = val.versionNumber;
        };
        const handleDeleteSearchItem = (target: Recordable) => {
            const index = unref(extendedSearchArr).findIndex((item) => item.field === target.field);
            if (index >= 0) {
                extendedSearchArr.value.splice(index, 1);
                if (form.value[target.field]) {
                    form.value[target.field] = null;
                    handleSearch();
                }
            }
        };
        const rangeDateChange = (val, field) => {
            const { startTime, endTime } = val;
            if (field === 'createTime') {
                form.value.createTime = startTime;
                form.value.createTimeEnd = endTime;
            }
            if (field === 'realTime') {
                form.value.onlineRealTimeStart = startTime;
                form.value.onlineRealTimeEnd = endTime;
            }
        };
        const handleReset = () => {
            form.value = {
                requireType: null,
                relateVersionNumber: null,
                level: null,
                status: null,
                stage: null,
                createTime: null,
                createTimeEnd: null,
                onlineRealTimeStart: null,
                onlineRealTimeEnd: null
            };
            searchKeyword.value = '';
        };
        const handleSearch = () => {
            emit('search', {
                ...unref(form),
                requireName: unref(searchKeyword)
            });
            if (unref(searchKeyword)) {
                saveHistory(unref(searchKeyword));
            }
        };
        // 用于清除更多里面所选项已选择的数据，因为只删除extendedSearchArr里所选项是不行的，还要删除对应所选项已选择的数据
        const handleExtendedSearchArrChange = (val) => {
            unref(fieldList)
                .slice(unref(showFieldMaxNum) - 1)
                .forEach((item) => {
                    if (val.length) {
                        const res = val.some((elem) => item.field === elem.field);
                        if (!res) {
                            form.value[item.field] = item.field === 'pmpLabels' ? [] : null;
                        }
                    } else {
                        form.value[item.field] = item.field === 'pmpLabels' ? [] : null;
                    }
                });
        };
        watch(
            () => props.system,
            () => {
                form.value.version = null;
            }
        );
        return {
            form,
            searchKeyword,
            fieldList,
            showFieldMaxNum,
            extendedSearchArr,
            handleSelectChange,
            handleReset,
            handleSearch,
            handleDeleteSearchItem,
            handleExtendedSearchArrChange,
            rangeDateChange
        };
    }
});
</script>
<style scoped lang="less">
.cell-item {
    font-size: 14px;
    cursor: pointer;
    color: #344563;
    margin-right: 8px;
}
</style>
